<template>
  <div class="XFiles">
    <el-upload
      ref="XFiles"
      :action="action"
      :on-preview="handlePictureCardPreview"
      :before-remove="handleRemove"
      :on-remove="onRemove"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :accept="attrs.accept"
      :data="attrs.data"
      :limit="attrs.limit"
      :on-exceed="handleExceed"
      :file-list="fileList" list-type="picture-card">
      <i style="font-size: 48px;" class="el-icon-circle-plus-outline" />
      点击上传图片
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="false" title="图片预览">
      <el-image :src="dialogImageUrl" width="100%">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture" />
          404
        </div>
      </el-image>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XMixIn from '@/components/@fhsy/x-tool/X/XMixIn'
export default {
  mixins: [XMixIn],
  props: {
    action: {
      type: [String],
      default: '/'
    }
  },
  data () {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      isDel: false
    }
  },
  watch: {
    dataValue: function (val) {
      if (val.length === 0) {
        this.fileList = []
        let refStyle = this.$refs.XFiles.$el.style
        refStyle.setProperty('--displayVal', 'flex')
      } else if (val.length === this.attrs.limit) {
        let refStyle = this.$refs.XFiles.$el.style
        refStyle.setProperty('--displayVal', 'none')
      }
    }
  },
  mounted () {
    this.$nextTick(function () {
      if (this.attrs.width === undefined) { this.attrs.width = '120px' }
      if (this.attrs.height === undefined) { this.attrs.height = '120px' }
      let refStyle = this.$refs.XFiles.$el.style
      refStyle.setProperty('--widthVal', this.attrs.width)
      refStyle.setProperty('--heightVal', this.attrs.height)
      if (this.dataValue) {
        this.dataValue.forEach(element => {
          this.fileList.push(element)
        })
      }
    })
  },
  methods: {

    /** 请求前 */
    beforeAvatarUpload (file) {
      if (this.attrs.sizeMax !== undefined && typeof this.attrs.sizeMax === 'number' && file.size / 1024 > this.attrs.sizeMax) {
        this.$message.error(`上传失败, 当前限制最大 ${this.attrs.sizeMax} kb`)
        return false
      }

      if (this.attrs.sizeMin !== undefined && typeof this.attrs.sizeMin === 'number' && file.size / 1024 < this.attrs.sizeMin) {
        this.$message.error(`上传失败, 当前限制最小 ${this.attrs.sizeMin} kb`)
        return false
      }

      if (this.attrs.accept !== undefined && this.attrs.isAccept !== undefined) {
        let acceptArr = this.attrs.accept.split(',')
        if (this.attrs.isAccept) {
          let selectIndex = acceptArr.indexOf(file.type)
          if (selectIndex === -1) {
            this.$message.error('上传失败, 该文件不符合限制格式')
            this.isDel = true
            return false
          }
        }
      }
    },
    handleExceed (file) {
      this.$message.error(`上传失败, 当前限制选择 ${this.attrs.limit} 个文件`)
    },
    handleAvatarSuccess (res, file) {
      if (this.attrs.resultKey === undefined) {
        this.attrs.resultKey = 'url'
      }
      this.dataValue.push({
        name: file.raw.name,
        url: file.response[this.attrs.resultKey],
        size: file.raw.size,
        type: file.raw.type
      })
      this.valueChange(this.dataValue)
      if (this.attrs.limit !== undefined && this.attrs.limit === this.dataValue.length) {
        let refStyle = this.$refs.XFiles.$el.style
        refStyle.setProperty('--displayVal', 'none')
      }
    },
    handleRemove (file, fileList) {
      if (!this.isDel) {
        return this.$confirm('您确定要删除该文件吗?')
      }
    },
    onRemove (file, fileList) {
      if (!this.isDel) {
        let selectIndex = this.dataValue.findIndex(item => item.uid === file.uid)
        this.dataValue.splice(selectIndex, 1)
        this.valueChange(this.dataValue)
        let refStyle = this.$refs.XFiles.$el.style
        refStyle.setProperty('--displayVal', 'flex')
        this.$message.success('操作成功')
      } else {
        this.isDel = false
      }
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style>
.XFiles {
  display: flex;
  flex-direction: row;
  --widthVal: 80px;
  --heightVal: 80px;
  --displayVal: flex;
}
.XFiles>div {
  display: flex;
  flex-direction: row;
}
.XFiles /deep/ .el-upload--picture-card {
  width: var(--widthVal);
  height: var(--heightVal);
  line-height: 20px;
}
.XFiles /deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: var(--widthVal);
  height: var(--heightVal);
}
.XFiles /deep/ .el-upload{
  display: var(--displayVal);
  flex-direction: column;
  justify-content: center;
}
</style>
